<template>
  <div class="home">
    <Header title='发票抬头'><span></span></Header>
    <main>
      <button class="adds" @click="toEdit">+新增发票抬头</button>
      <div class="listwrap" v-for="(v,i) in list" :key='i'>
        <li>
          <p>发票抬头{{v.name}} <button @click="deletes(v.id)">删除</button></p>
          <p>发票税号{{v.id}}</p>
        </li>
      </div>
    </main>
  </div>
</template>

<script>
import {mapState,mapActions} from "vuex"
import {deleteItem} from "../api"
import Header from "../components/Header.vue"
export default {
  name: 'Home',
  components: {
    Header
  },
  computed:{
    ...mapState(['list']),
  },
  methods:{
    ...mapActions(['addItem']),
    toEdit(){
      this.$router.push('/add/person')
    },
    deletes(id){
      console.log(id)
      deleteItem({id:id})
    }
  },
  created(){
    this.addItem()
  }
}
</script>
<style lang="scss" scoped>
.home{
  width: 100%;
  height: 100%;
    main{
      background: #f3f3f3;
      width: 100%;
      height: 100%;
      .adds{
        width: 80%;
        margin-left: 40px;
        height: 50px;
        border-radius: 15px;
        margin-top: 20px;
        color: dodgerblue;
        font-size: 16px;
        background: #Fff;
      }
    }
    .listwrap{
      width: 100%;
      li{
        width: 100%;
        line-height: 50px;
        background: #fff;
        padding: 0 20px;
        border-bottom: 2px solid #f3f3f3;
      }
    }
}
  
</style>